import { memo } from 'react';
import type { FC } from 'react';
import { Typography, Radio, Space } from 'antd';
import {
  QuestionRadioPropsType,
  QuestionRadioDefaultProps,
  OptionType,
} from './Interface';

const { Paragraph } = Typography;
const QuestionRadio: FC<QuestionRadioPropsType> = (
  props: QuestionRadioPropsType
) => {
  const { title, isVertical, options, value } = {
    ...QuestionRadioDefaultProps,
    ...props,
  };
  return (
    <div>
      <Paragraph strong>{title}</Paragraph>
      <Radio.Group value={value}>
        <Space direction={isVertical ? 'vertical' : 'horizontal'}>
          {options?.map((option: OptionType) => {
            return (
              <Radio key={option.value} value={option.value}>
                {option.text}
              </Radio>
            );
          })}
        </Space>
      </Radio.Group>
    </div>
  );
};

export default memo(QuestionRadio);
